<template>
  <div class="menu-list">
   <router-link :to="item.router" v-for="item in data" :key="item.id" class="menu-item">
      <img
        class="menu-item-icon"
        :src="item.icon"
      />
      <span class="menu-item-text">{{item.text}}</span>
   </router-link> 
   
  </div>
</template>

<script>
import "amfe-flexible";

export default {
  name: "MenuLlist",
  props:{
      data:Array
  },
  data(){
   return{
    
   }
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

<style>
.menu-list{
   
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;  
   background:rgba(255,255,255,1);
   box-shadow:0px 2px 21px 0px rgba(24,49,104,0.18);
   border-radius:16px;
}
.menu-list>.menu-item{
    margin-bottom: 15px;
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    text-align: center;
}
.menu-list>.menu-item>.menu-item-icon{
    display: block;
    height: 128px;
    width: 128px;
}
.menu-list>.menu-item>.menu-item-text{
    display: block;
    font-size:28px;
    color:rgba(34,34,34,1);
}
</style>
